<template>
  <div class="app-container">
    <el-form :model="searchdata" ref="searchdata" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="ID" prop="userid">
        <el-input v-model="searchdata.userid" placeholder="请输入id" clearable @keyup.enter.native="handleQuery"
          onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" />
      </el-form-item>
      <el-form-item label="联系方式" prop="tel">
        <el-input v-model="searchdata.tel" placeholder="请输入用户电话" clearable @keyup.enter.native="handleQuery"
          onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" />
      </el-form-item>
      <el-form-item label="服务种类" prop="typeid">
        <el-select v-model="searchdata.typeid" placeholder="服务种类" clearable style="width: 180px">
          <el-option v-for="dict in servetype" :key="dict.key" :label="dict.label" :value="dict.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="预计婚期" prop="newtimes">
        <el-select v-model="searchdata.newtimes" placeholder="预计婚期" clearable style="width: 180px">
          <el-option v-for="dict in yjhq" :key="dict.key" :label="dict.label" :value="dict.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" prop="chulitype">
        <el-select v-model="searchdata.chulitype" placeholder="处理状态" clearable style="width: 180px">
          <el-option v-for="dict in chulizhuangtai" :key="dict.key" :label="dict.label" :value="dict.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-date-picker v-model="searchdata.starttime" type="date" value-format="timestamp"
          :picker-options="startDatePicker" placeholder="开始时间" style="width: 150px">
        </el-date-picker>
        <el-date-picker v-model="endtimes" type="date" value-format="timestamp" :picker-options="endDatePicker"
          placeholder="结束时间" style="width: 150px">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 100%;margin-left: 100px;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="userList" max-height="800">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="userid" />
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar" alt="" weight="20" style="width:60px;border-radius: 50%;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center" prop="username" />
      <el-table-column label="联系方式" align="center" prop="tel" />
      <el-table-column label="服务种类" align="center" prop="typeid">
        <template slot-scope="scope">
          <span v-if="scope.row.typeid == '1'">婚纱摄影</span>
          <span v-if="scope.row.typeid == '2'">婚纱礼服</span>
          <span v-if="scope.row.typeid == '3'">婚礼策划</span>
          <span v-if="scope.row.typeid == '4'">婚宴酒店</span>
          <span v-if="scope.row.typeid == '5'">推荐活动</span>
          <span></span>
          <span></span>
        </template>
      </el-table-column>>
      <el-table-column label="预约时间" align="center" prop="times" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.times, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" align="center" prop="chulitype">
        <template slot-scope="scope">
          <span v-if="scope.row.chulitype == '0'">未处理</span>
          <span v-if="scope.row.chulitype == '1'">转为客资</span>
          <span v-if="scope.row.chulitype == '2'">作废客资</span>
        </template>
      </el-table-column>
      <el-table-column label="预约内容" align="center" prop="msg" width="250" />
      <!-- <el-table-column label="预约列表" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleyuyue(scope.row)">预约详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="searchdata.pageNum" :limit.sync="searchdata.pageSize"
      @pagination="getList" />
    <!-- 预约列表 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="close">
      <div class="dialog">
        <el-table :data="yuyueList">
          <el-table-column label="预约时间" align="center" prop="date">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.date, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预约内容" align="center" prop="msg" />
        </el-table>
      </div>
      <el-form :model="form1" :rules="rules" style="width: 800px; height:50px" label-width="100px">
        <el-form-item style="width:400px">
          <template v-if="this.yuyuexq.chulitype == '0'">
            <el-radio-group v-model="form1.type">
              <el-radio :label="0">转为客资</el-radio>
              <el-radio :label="1">作废</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item prop="remark" v-if="form1.type == '1'">
          <el-input v-model="form1.remark" placeholder="请输入作废原因" type="textarea" clearable style="width: 204px">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="this.yuyuexq.chulitype == '0'" :disabled="lock1" @click="handchuli()">处理</el-button>
      </div>
    </el-dialog>
    <!-- 转为客资 -->
    <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="客资姓名" prop="kzName" style="width:400px">
          <el-input v-model="form.kzName" placeholder="请输入客资姓名" style="width:204px" />
        </el-form-item>
        <el-form-item label="联系方式" prop="kzTel"
          :rules="form.kzWechat ? [{ required: false, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }] : [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]">
          <el-input v-model="form.kzTel" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="微信号" prop="kzWechat" style="width:400px"
          :rules="form.kzTel ? [{ required: false }] : [{ required: true, message: '微信号不能为空', trigger: 'blur' }]">
          <el-input v-model="form.kzWechat" placeholder="请输入微信号" style="width:204px" />
        </el-form-item>
        <el-form-item label="客资来源" prop="kzFrom">
          <el-input v-model="form.kzFrom" placeholder="微信留资" :disabled="true" />
        </el-form-item>
        <el-form-item label="服务种类" prop="serveType" style="width:400px">
          <el-select v-model="form.serveType" placeholder="请输入服务种类" clearable style="width: 204px">
            <el-option v-for="dict in serveType" :key="dict.key" :value="dict.label" />
          </el-select>
        </el-form-item>
        <!-- 1、三个月内 2、三到五月  3、一年以上 -->
        <el-form-item label="客资预计婚期" prop="kzWedding">
          <el-select v-model="form.kzWedding" placeholder="请输入预计婚期" clearable style="width: 204px">
            <el-option v-for="dict in kzWedding" :key="dict.key" :label="dict.label" :value="dict.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务城市" prop="kzWantcity" style="width: 400px">
          <el-cascader size="large" ref="cascader" :options="options" clearable v-model="selectedOptions"
            style="width: 204px" :props="defaultParams" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="服务城市2" prop="kzWantcity1" clearable>
          <el-cascader size="large" ref="cascader" :options="options" :props="defaultParams" v-model="selectedOptions1"
            style="width: 204px" @change="handleChange1">
          </el-cascader>
        </el-form-item>
        <el-form-item label="服务城市3" prop="kzWantcity2" clearable style="width: 400px">
          <el-cascader size="large" ref="cascader" :options="options" :props="defaultParams" v-model="selectedOptions2"
            style="width: 204px" @change="handleChange2">
          </el-cascader>
        </el-form-item>
        <el-form-item label="备注" prop="kzRemark">
          <el-input v-model="form.kzRemark" type="textarea" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="聊天及截图上传" prop="kzVoucherPic">
          <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers" list-type="picture"
            style="width:204px" :file-list="fileList" :on-success="handlePreview" :on-remove="handleRemove"
            name="fileName">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="lock" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser, insertZkwlResourcePCwechat, seletWekeziAll, selectyuyueAll, updatewechat, selectremark, findAllYuyueUser } from "@/api/kuser/wxuser";
import allData from '@/api/kuser/level-data.js';
import { getToken } from '@/utils/auth'
export default {
  name: "Yuyue",
  data() {
    return {
      lock:false,
      lock1:false,
      endtimes: '',
      searchdata: {
        userid: '',
        tel: '',
        starttime: '',
        endtime: '',
        typeid: '1',
        chulitype: '',
        pageNum: 1,
        pageSize: 10,
        newtimes: '',
      },
      edit: true,
      defaultParams: {
        value: "name", //设置默认值value
        label: "name", //设置显示的是什么
        children: "children" //设置子元素数组
      },
      yuyueList: [],
      fileList: [],
      options: allData,
      selectedOptions: [],
      selectedOptions1: [],
      selectedOptions2: [],
      detailsList: [],
      serveType: [{
        key: '1',
        label: '婚纱礼服'
      }, {
        key: '2',
        label: '婚礼策划'
      }, {
        key: '3',
        label: '婚宴酒店'
      }, {
        key: '4',
        label: '婚纱摄影'
      }],
      yjhq: [{
        key: '1',
        label: '预计婚期1'
      }, {
        key: '2',
        label: '预计婚期2'
      }, {
        key: '3',
        label: '预计婚期3'
      },],
      kztype: [{
        value: '1',
        label: '有效'
      }, {
        value: '0',
        label: '无效'
      }],
      // 服务种类
      servetype: [{
        key: '1',
        label: '婚纱摄影'
      }, {
        key: '2',
        label: '婚纱礼服'
      }, {
        key: '3',
        label: '婚礼策划'
      }, {
        key: '4',
        label: '婚宴酒店'
      }, {
        key: '5',
        label: '推荐活动'
      }],
      // 处理状态
      chulizhuangtai: [{
        key: '1',
        label: '转为客资'
      }, {
        key: '2',
        label: '作废客资'
      }, {
        key: '0',
        label: '未处理'
      }],
      // 预计婚期
      kzWedding: [{
        key: '1',
        label: '三个月内'
      }, {
        key: '2',
        label: '半年内'
      }, {
        key: '3',
        label: '一年内'
      }, {
        key: '4',
        label: '一年以上/婚期未定'
      }, {
        key: '5',
        label: '无'
      }],
      url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      img: "",
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      userList: [],
      // 弹出层标题
      title: "",
      title1: "",
      title2: "",
      title3: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      open2: false,
      open3: false,
      // 查询参数
      queryParams: {
        uImg: null,
        uCity: null,
        uCountry: null,
        uTel: null,
        uSex: null,
        uLanguage: null,
        uNickname: null,
        uProvience: null,
        uAddress: null,
        uSource: null,
        uOpeanid: null,
        collectId: null,
      },
      // 表单参数
      form: {
        kzTel: "",
        kzName: '',
        kzWechat: '',
        serveType: '',
        kzWedding: '',
        kzWantcity: '',
        kzWantcity1: '',
        kzWantcity2: '',
        kzVoucherPic: '',
        kzRemark: '',
        uId: '',
        shopaddress: '',
        uImg: '',
        uNickname: '',
        wanttype: '',
        wechatname: '',
      },
      form1: {
        type: 0,
        remark: '',
        uid: '',
        typeid: '',
      },
      form2: {
        remark: ''
      },
      yuyuexq: {},
      date: {
        uid: '',
        typeid: '',
      },
      // 表单校验
      rules: {
        kzTel: [{ required: true, message: "联系方式不能为空", trigger: "blur" },
        {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur"
        }],
        kzWechat: [{ required: true, message: "微信号不能为空", trigger: "blur" }],
        kzName: [{ required: true, message: "客资姓名不能为空", trigger: "blur" }],
        // kzFrom: [{ required: true, message: "客资来源不能为空", trigger: "blur" }],
        serveType: [{ required: true, message: "服务种类不能为空", trigger: "blur" }],
        kzWedding: [{ required: true, message: "预计婚期不能为空", trigger: "blur" }],
        kzWantcity: [{ required: true, message: "服务城市不能为空", trigger: "blur" }],
        remark: [{ required: true, message: "作废原因不能为空", trigger: "blur" }]
      },
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.open = false;
      this.form = {
        kzTel: "",
        kzName: '',
        kzWechat: '',
        serveType: '',
        kzWedding: '',
        kzWantcity: '',
        kzWantcity1: '',
        kzWantcity2: '',
        kzVoucherPic: '',
        kzRemark: '',
        uId: '',
      };
      this.form1 = {
        type: 0,
        remark: '',
        uid: '',
      };
      this.form2 = {
        remark: ''
      };
      this.reset();
    },
    /** 查询列表 */
    async getList() {
      this.loading = true;
      let res = await findAllYuyueUser(this.searchdata);
      if (res.code == 200) {
        this.userList = res.rows;
        this.total = res.total;
        this.loading = false;
      }
    },
    // 取消按钮
    cancel() {
      this.open1 = false;
      this.open2 = false;
      this.reset();
      this.fileList = [];
      this.selectedOptions = [];
      this.selectedOptions2 = [];
      this.selectedOptions1 = [];
    },
    // 表单重置
    reset() {
      this.form = {
        kzTel: "",
        kzName: '',
        kzWechat: '',
        serveType: '',
        kzWedding: '',
        kzWantcity: '',
        kzWantcity1: '',
        kzWantcity2: '',
        kzVoucherPic: '',
        kzRemark: '',
        uid: '',
      };
      this.resetForm("form");
      this.fileList = [];
      this.selectedOptions = [];
      this.selectedOptions2 = [];
      this.selectedOptions1 = [];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.searchdata.typeid == '') {
        this.$modal.msgError("请选择服务种类");
      } else if (this.searchdata.starttime == '' && this.endtimes == "" && this.searchdata.typeid != '') {
        findAllYuyueUser(this.searchdata).then(response => {
          if (response.code == 200) {
            this.userList = response.rows;
            this.total = response.total;
          }
        })
      } else if (this.searchdata.starttime == "" && this.endtimes != '') {
        this.$modal.msgError("请输入开始时间");
      } else if (this.searchdata.starttime != '' && this.endtimes == '') {
        this.$modal.msgError("请输入结束时间");
      } else if (this.searchdata.starttime != '' && this.endtimes != '' && this.searchdata.starttime > this.endtimes) {
        this.$modal.msgError("结束时间必须大于开始时间");
      } else if (this.searchdata.starttime != '' && this.endtimes != '' && this.searchdata.starttime < this.endtimes && this.searchdata.typeid != '') {
        this.searchdata.endtime = this.endtimes + 24 * 60 * 60 * 1000 - 1;
        findAllYuyueUser(this.searchdata).then(response => {
          if (response.code == 200) {
            this.userList = response.rows;
            this.total = response.total;
          }
        })
      } else if (this.queryParams.startTime == this.queryParams.endTime) {
        this.$modal.msgError("结束时间必须大于开始时间");
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.searchdata = {
        userid: '',
        tel: '',
        starttime: '',
        endtime: '',
        typeid: '1',
        chulitype: '',
        pageNum: 1,
        pageSize: 10,
      },
        this.getList();
      this.endtimes = "";
    },
    // 操作预约列表
    handleyuyue(row) {
      this.yuyuexq = row;
      this.date.uid = row.userid;
      this.date.typeid = row.typeid;
      this.open = true;
      selectyuyueAll(this.date).then(response => {
        if (response.data.code == 200) {
          this.yuyueList = response.data.data
        } else {
          this.$modal.msgError(response.data.msg);
        }
      })
    },
    // 处理
    handchuli() {
      if (this.form1.type == 0) {
        this.open = false;
        this.open1 = true;
        seletWekeziAll(this.date).then(response => {
          if (response.data.code == 200) {
            this.form.kzTel = response.data.data.kztel;
            this.form.uId = response.data.data.uId;
            this.form.kzFrom = "微信留资";
            if (response.data.data.wechatname != '') {
              this.form.kzName = response.data.data.wechatname;
            } else {
              this.form.kzName = '';
            }
            if (response.data.data.wanttype != '') {
              this.form.serveType = response.data.data.wanttype;
            } else {
              this.form.serveType = '';
            }
            if (response.data.data.shopaddress != '') {
              let strr = response.data.data.shopaddress;
              let reg = /.+?(省|市|自治区|自治州|县|区)/g;
              let cc = strr.match(reg);
              function hasValue(obj, value) {
                for (var key in obj) {
                  if (obj.hasOwnProperty(key)) {
                    var val = obj[key];
                    if (val === value) {
                      return true;
                    } else if (typeof val === "object") {
                      if (hasValue(val, value)) {
                        return true;
                      }
                    }
                  }
                }
                return false;
              }

              var options1 = this.options;
              var target = cc[2];
              if (hasValue(options1, target)) {
                cc[2] = cc[2];
              } else {
                cc[2] = "市辖区"
              }
              this.selectedOptions = [cc[0], cc[1], cc[2]];
              this.form.kzWantcity = cc[0] + cc[1] + cc[2];
            } else {
              this.selectedOptions = [];
              this.form.kzWantcity = '';
            }
          }
        })
      } else if (this.form1.type == 1) {
        if (this.form1.remark == '') {
          this.$modal.msgError('请输入作废原因');
        } else {
          this.form1.uid = this.yuyuexq.userid;
          this.form1.typeid = this.yuyuexq.typeid;
          this.lock1=true;
          updatewechat(this.form1).then(response => {
            if (response.data.code == 200) {
              this.lock1=false;
              this.$modal.msgSuccess(response.msg);
              this.open = false;
              this.form1 = {
                type: 0,
                remark: '',
                uid: '',
              },
                this.getList();
            } else {
              this.lock1=false;
              this.$modal.msgError(response.msg);
            }
          })
        }
      }
    },
    // 转为客资提交
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.kzFrom = "微信留资"
          this.lock=true;
          insertZkwlResourcePCwechat(this.form).then(response => {
            if (response.data.code == 200) {
              this.lock=false;
              this.$modal.msgSuccess(response.data.msg);
              this.open1 = false;
              this.reset();
              this.getList();
            } else {
              this.lock=false;
              this.$modal.msgError(response.data.msg);
            }
          })
        }
      })
    },
    // 服务城市
    handleChange(value) {
      this.form.kzWantcity = value[0] + value[1] + value[2]
    },
    handleChange1(value) {
      this.form.kzWantcity1 = value[0] + value[1] + value[2];
      if (value.length == 0) {
        this.form.kzWantcity1 = null; // 清空选中值
      }
    },
    handleChange2(value) {
      this.form.kzWantcity2 = value[0] + value[1] + value[2];
      if (value.length == 0) {
        this.form.kzWantcity2 = null; // 清空选中值
      }
    },
    // 上传截图
    handleRemove(file, fileList) {
      this.fileList = fileList;
      let List = [];
      this.fileList.forEach(item => {
        List.push(item.response.data)
      });
      this.form.kzVoucherPic = List.join(',')
    },
    handlePreview(response, file, fileList) {
      this.fileList = fileList;
      let List = [];
      this.fileList.forEach(item => {
        List.push(item.response.data)
      });
      this.form.kzVoucherPic = List.join(',')
    },
    // 验证搜索框日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          // debugger;
          if (self.endTime) {
            //如果结束时间不为空，则小于结束时间
            return new Date(self.endTime).getTime() < time.getTime();
          } else {
            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.startTime) {
            //如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.startTime).getTime() > time.getTime();
          } else {
            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
  }
};
</script>
<style scoped>
.el-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.avatar-uploader .el-upload {
  border: 1px solid #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  border: 1px solid #8c939d;
}

.avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.dialog {
  height: 400px;
  overflow: auto;
}

.dialog::-webkit-scrollbar {
  width: 3px;
}

.dialog::-webkit-scrollbar-thumb {
  background: #8798AF;
  border-radius: 2px;
}

.dialog::-webkit-scrollbar-track {
  background: transparent;
}
</style>  